HTML5-Classe 4 - ELEMENTOS DE CONTEÚDOS EM TEXTO(em bloco)

HTML - Elementos HTML Classe 4 - ELEMENTOS DE CONTEÚDOS EM TEXTO

Como ficou definido no documento 2, os elementos html podem ser divididos nas seguintes classes :

Classes dos elementos HTML:

1-ELEMENTOS BÁSICOS: <body>
2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address><article><aside> <footer> <header><h1> a <h6><hgroup><nav>
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd><dl><dt><div><figure> <figcaption><hr><li><main><ol><p><pre><ul>
5-ELEMENTOS DE TEXTO EM LINHA: <a><abbr><b><br><cite><code> <data><dfn><em><i><kbd><mark><q><s><samp> <small><span><strong><sub><sup><time><u><var>
6-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <img><area><audio><map><track><video>
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed><object><param><source>
8-ELEMENTOS DE SCRIPT: <canvas><noscript><script>
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del> <ins>
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption><col><colgroup><table> <tbody><td><tfoot><th><thead><tr>
11-ELEMENTOS DE FORMULÁRIO: <button><datalist><fieldset><form><input> <label><legend><meter><optgroup><option><output><progress> <select><textarea>
12-ELEMENTOS INTERATIVOS: <details><menu><menuitem><summary>

Neste documento discutiremos a classe 4 - ELEMENTOS DE CONTEÚDOS EM TEXTO.

Note bem que em 4-ELEMENTOS DE CONTEÚDOS EM TEXTO temos tags de texto que são exibidas em blocos e em 5-ELEMENTOS DE TEXTO EM LINHA temos tags de texto que são exibidas em linha.
Neste documento falaremos apenas sobre a classe 4 : ELEMENTOS DE CONTEÚDOS EM TEXTO

1-<dl>, <dt> e <dd>

Estas tags são úteis para exibição de parágrafos em nível hierarquico onde dl é a tag agrupadora dos itens (dl=definition list), a tag dt é o tema ou titulo de um item (dt=data title) e a tag dd é uma explicação ou definição do tema ou titulo .
Os itens dentro da tag dt são exibidos em negrito no Google Chrome.
Feito para quando temos uma lista de termos e uma lista de descrições associadas a estes termos.

Exemplo:
<dl>
<dt>Este é o titulo(dt).</dt>
<dd>Esta é a descrição do titulo(dd).</dd>
</dl>

Seria exibido assim :

Este é o titulo(dt).: Esta é a descrição do titulo(dd).

Podemos observar que no chrome exibe o dt em negrito e o dd sem avançar o alinhamento à direita.
Mas alguns browsers exibem a tag dd alinhada mais a direita do que a tag dt.

2-<div>

A tag div junto com a css causou uma revolução na formatação de páginas fazendo com que o velho método de colocar tudo da página em tabelas para que ficasse alinhado, esteticamente organizado caisse em desuso rapidamente e não só pela simplicidade de uso mas pela flexibilidade e versatilidade do componente.
A div representa uma divisão, uma separação no documento corrente, ou seja, eu estou falando sobre algo e desejo mudar o assunto, iniciar coisa nova. É para isso que serve a tag div, separar conteúdos dentro da mesma página
Contudo, um dos maiores usos de div é agrupar conteúdos dentro de sí. Se, por exemplo, colocarmos um fundo colorido na div e adicionamos um monte de elementos dentro dela eles todos terão o fundo colorido. Muito utilizada também para alinhar esse 'agrupamento de itens' na página, ou seja, centralizar, posicionar, etc. Como a div é um elemento de bloco, ela segue a regra que se for o primeiro elemento na linha é exibido normalmente mas se já houver um elemento à esquerda a div será exibida no começo da linha seguinte. Outra regra sobre o elemento div-bloco é que a próxima tag renderizada depois da div será exibida na linha seguinte mesmo que haja espaço na linha corrente para exibir o elemento.

Exemplo de uma div : Neste exemplo quero escrever um texto com fundo azul claro (Importante : Lembre-se que a tag font em HTML5 caiu em desuso).

TestinhoAntes<div style="background-color:lightblue">Texto dentro da div</div>TestinhoDepois

Como é exibida pelo browser:
TestinhoAntes

Texto dentro da div

TestinhoDepois

Importante : Note que os textos são pequenos e todos poderiam ser exibidos na mesma linha mas a div funciona assim, acabou ocupando até um trecho da linha que o texto não usou.

3-<figcaption e><figure>

O Elemento HTML <figure> representa o conteúdo independente, frequentemente com uma legenda (<figcaption>), e é normalmente referido como uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal.Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.
Exemplo :

<figure>
<img src="../imagens/paris.jpg" alt="A cidade Luz">
<figcaption><i>fig. 1</i> - A cidade Luz mais bela que nunca</figcaption>
</figure>

Como o browser exibe:

*fig. 1* - A cidade Luz mais bela que nunca

4-<hr>

A tag HR significa horizontal ruler e exibe uma linha horizontal na tela.
Até o html4 tinha os atributos align, color, noshade, size e width mas foram todos retirados no html5 e colocados na CSS.
Nesta página esta cheia de HRs em cada item exibido.

5-<ul>, <ol> e <li>

Estas tags trabalham com listas de itens. A lista de itens é um estilo que usamos quando queremos agrupar itens de mesma finalidade, por exemplo, eu tenho uma lista de estados federativos e quero exibí-la.
A tag ol significa ordered lista ou lista ordenada que nadas mais é uma lista com uma numeração ou cuja ordem dos elementos deve ser visível no documento.
A tal ul significa unordered list ou lista não ordenada e é uma lista sem a preocupação de contagem, quem vem antes ou depois, uma lista mais simples que a ol.
Já a tag li que significa list item ou item da lista é utilizada tanto na tag ol como na ul.
Abaixo temos alguns exemplos de listas:

Listas Ordenadas ou Númeradas (ol-ordered list)

Primeira Linha
Segunda Linha
Terceira Linha
Quarta Linha
Quinta Linha
Sexta Linha
Sétima Linha
Oitava Linha
Nona Linha

Nas listas ordenadas podemos definir se queremos que a contagem seja numérica, alfabética ou até mesmo em algarismos romanos.

Lista Ordenada 2 com numeração alfabética maiúscula :

Lista Ordenada - Item 1
Lista Ordenada - Item 2
Lista Ordenada - Item 3
Lista Ordenada - Item 4
Lista Ordenada - Item 5

Lista Ordenada 3 com numeração alfabética minúscula :

Lista Ordenada - Item 1
Lista Ordenada - Item 2
Lista Ordenada - Item 3
Lista Ordenada - Item 4
Lista Ordenada - Item 5

Lista Ordenada 2 com numeração em algarismos romanos minúsculos :

Lista Ordenada - Item 1
Lista Ordenada - Item 2
Lista Ordenada - Item 3
Lista Ordenada - Item 4
Lista Ordenada - Item 5

Lista Ordenada 2 com numeração em algarismos romanos maiúsculos :

Lista Ordenada - Item 1
Lista Ordenada - Item 2
Lista Ordenada - Item 3
Lista Ordenada - Item 4
Lista Ordenada - Item 5

Lista ordenada contando de 100 em diante:

primeiro item
segundo item
terceiro item
quarto item
quinto item

Listas Não Ordenadas (ul=unordered list)

Primeira Linha
Segunda Linha
Terceira Linha
Quarta Linha
Quinta Linha
Sexta Linha
Sétima Linha
Oitava Linha
Nona Linha

Outro recurso interessante de identação é colocar uma lista dentro da outra para dar uma ideia de hierarquia de seus elementos.

Lista Não ordenada dentro de Lista Não ordenada:

Primeiro item da lista
Segundo item da lista:
- Primeiro item da lista aninhada
- Segundo item da lista aninhada
Terceiro item da lista

Lista Não ordenada dentro de Lista ordenada:

Primeiro item da lista
Segundo item da lista:
- Primeiro item da lista aninhada
- Segundo item da lista aninhada
Terceiro item da lista

Lista ordenada dentro de Lista Não ordenada:

Primeiro item da lista
Segundo item da lista:
1. Primeiro item da lista aninhada
2. Segundo item da lista aninhada
Terceiro item da lista

As listas não ordenadas(ul) também são muito utilizadas para fazer menus em conjunto com a css e alguns macetes técnicos.

6-<main>

A tag <main> especifica o conteúdo principal de um documento.
O conteúdo dentro do elemento <main> deve ser exclusivo para o documento. Ele não deve conter nenhum conteúdo repetido em documentos como barras laterais, links de navegação, informações de direitos autorais, logotipos do site e formulários de pesquisa.
Nota: Não deve haver mais de um elemento <main> em um documento. O elemento <main> NÃO deve ser um descendente de um elemento <article>, <aside>, <footer>, <header> ou <nav>.

O elemento <main> define o conteúdo principal dentro do <body> em seu documento ou aplicação. Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação. O mesmo deverá ser único na página, ou seja, dentro do elemento <main> não deverão ser incluidas seções da página que sejam comuns a todo o site ou aplicação, tais como mecanismos de navegação, informações de copyright, logotipo e campos de busca (a não ser, é claro, caso a função principal do documento seja fazer algum tipo de busca).

Exemplo :

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome, Firefox, Safari e o Edge são os browsers mais utilizados hoje em dia.</p>

  <article>
    <h1>Google Chrome</h1>
    <p>O Google Chrome é um navegador gratuito e de código aberto desenvolvido pelo Google, lançado em 2008.
  </article>

  <article>
    <h1>Edge ( sucessor do Internet Explorer )</h1>
    <p>O Internet Explorer é um navegador gratuito da Microsoft, lançado em 1995.</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>O Firefox é um navegador gratuito e de código aberto da Mozilla, lançado em 2004.</p>
  </article>
</main>

7-<p>

A tag p significa mudança de parágrafo e foi muito usada antigamente mas hoje foi substituída pela tag <br> e somente em ocasões especiais onde precisamos destacar o texto do resto do conteúdo da página usamos ela ( se bem que tem as tags H1 e H6 também com essa finalidade).
A tag p é uma tag de bloco, ou seja, se o local para sua exibição for no início da linha, sem problemas mas se houver uma vírgula já renderizada na mesma linha, a tag p será renderizada na linha seguinte. E como uma tag de bloco, irá ocupar toda a linha e a próxima tag será renderizada na linha logo abaixo.

Exemplo:
Temos aqui um texto comum seguido por uma tag p <p> e este texto esta dentro da tag p </p> e este texto esta escrito fora da tag p.

No brower é exibido assim :

Temos aqui um texto comum seguido por uma tag p

e este texto esta dentro da tag p

e este texto esta escrito fora da tag p.

8-<pre>

Esta tag faz com que o texto na página seja tratado pelo browser como se fosse um texto comum e não uma página html. Com isto, quebras de linhas e espaços serão exibidos como um texto no bloco de notas.
Outra característica é que a fonte de letra é monoespaçada, ou seja, todos os caracteres tem a mesma largura por isso um caractere da linha de cima fica bem acim do outro na linha de baixo.
Exemplo :
<pre>
            Neste exemplo escrevi um texto e
            mudei de linha mas não com uma tag p ou br e sim um CRLF.
            Com esta tag o browser trata o texto como o bloco de notas faria.
</pre>

            Neste exemplo escrevi um texto e 
            mudei de linha mas não com uma tag p ou br e sim um CRLF.
            Com esta tag o browser trata o texto como o bloco de notas faria.

O texto acima esta escrito exatamente como num bloco de notas, sem tags nem espaçadores.

Dá até pra brincar com ele :

       +---------+
       |  ^   ^  |
       |  *   *  |
       |    ^    |
       |  -----  |
       +=========+
           ||
           ++------>
        
        O desenho acima foi feito em texto simples como se fosse num bloco de notas comum.